{% extends "base.html" %}

{% block content %}
<div class="container py-5">
    <h1 class="text-center mb-4">{{ antique.name }}</h1>
    
    <div class="row">
        <!-- 图片展示区 -->
        <div class="col-md-8 mb-4">
            <div class="card shadow-sm rounded">
                <div class="card-body p-0">
                    <img src="{{ url_for('static', filename='uploads/' + antique.main_image) }}" 
                         class="img-fluid w-100 main-image cursor-pointer" 
                         alt="{{ antique.name }}"
                         style="max-height: 600px; object-fit: contain; background-color: #f8f9fa;"
                         onclick="showLargeImage(this.src)">
                </div>
            </div>
            
            {% if antique.images|length > 1 %}
            <div class="mt-3">
                <div class="row g-2">
                    {% for image in antique.images %}
                    <div class="col-3">
                        <img src="{{ url_for('static', filename='uploads/' + image.image_path) }}" 
                             class="img-thumbnail cursor-pointer thumbnail" 
                             alt="{{ antique.name }}"
                             style="height: 100px; object-fit: cover;"
                             onclick="changeMainImage(this.src)">
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
        
        <!-- 藏品信息 -->
        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title mb-4">藏品信息</h5>
                    
                    <div class="mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-clock text-primary me-2"></i>
                            <strong>年代：</strong>
                        </div>
                        <p class="ms-4 mb-0">{{ antique.era }}</p>
                    </div>
                    
                    <div class="mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-ruler-combined text-primary me-2"></i>
                            <strong>尺寸：</strong>
                        </div>
                        <p class="ms-4 mb-0">{{ antique.dimensions }}</p>
                    </div>
                    
                    {% if antique.price %}
                    <div class="mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-tag text-primary me-2"></i>
                            <strong>优惠价：</strong>
                        </div>
                        <p class="ms-4 mb-0 text-danger fw-bold">{{ antique.price }}</p>
                    </div>
                    {% endif %}
                    
                    <div class="mb-3">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-info-circle text-primary me-2"></i>
                            <strong>藏品描述：</strong>
                        </div>
                        <p class="ms-4 mb-0">{{ antique.description }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图片查看器 -->
<div class="modal fade" id="imageViewer" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0 position-relative">
                <button type="button" class="btn-close position-absolute top-0 end-0 m-3 bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="position-relative image-container" onclick="closeModal(event)">
                    <img src="" class="modal-image" id="modalImage">
                    <div class="position-absolute bottom-0 start-50 translate-middle-x mb-3 controls-container">
                        <div class="btn-group">
                            <button class="btn btn-light" onclick="zoomImage(-0.1)">
                                <i class="fas fa-minus"></i>
                            </button>
                            <button class="btn btn-light" onclick="resetZoom()">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                            <button class="btn btn-light" onclick="zoomImage(0.1)">
                                <i class="fas fa-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let currentZoom = 1;
let modalInstance = null;

function changeMainImage(src) {
    const mainImage = document.querySelector('.main-image');
    mainImage.src = src;
    
    // 更新缩略图的激活状态
    const thumbnails = document.querySelectorAll('.thumbnail');
    thumbnails.forEach(thumb => {
        if (thumb.src === src) {
            thumb.classList.add('border-primary');
        } else {
            thumb.classList.remove('border-primary');
        }
    });
}

function showLargeImage(src) {
    const modalElement = document.getElementById('imageViewer');
    if (!modalInstance) {
        modalInstance = new bootstrap.Modal(modalElement);
    }
    
    const modalImage = document.getElementById('modalImage');
    modalImage.src = src;
    resetZoom();
    
    // 等待图片加载完成后显示模态框
    modalImage.onload = function() {
        modalInstance.show();
    };
}

function closeModal(event) {
    // 如果点击的是控制按钮区域，不关闭模态框
    if (event.target.closest('.controls-container')) {
        return;
    }
    modalInstance.hide();
}

function zoomImage(factor) {
    const modalImage = document.getElementById('modalImage');
    currentZoom = Math.max(0.5, Math.min(3, currentZoom + factor));
    modalImage.style.transform = `scale(${currentZoom})`;
}

function resetZoom() {
    currentZoom = 1;
    const modalImage = document.getElementById('modalImage');
    modalImage.style.transform = 'scale(1)';
}

// 页面加载时设置第一个缩略图为激活状态
document.addEventListener('DOMContentLoaded', function() {
    const firstThumbnail = document.querySelector('.thumbnail');
    if (firstThumbnail) {
        firstThumbnail.classList.add('border-primary');
    }
});
</script>

<style>
.cursor-pointer {
    cursor: pointer;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    cursor: zoom-out;
}

.modal-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transform-origin: center center;
    transition: transform 0.2s ease-in-out;
}

.modal-xl {
    max-width: 100vw;
    margin: 0;
}

.controls-container {
    cursor: default;
}

.btn-group .btn {
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
}

.btn-group .btn:hover {
    background-color: rgba(255, 255, 255, 1);
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.9);
}

.modal-backdrop.show {
    opacity: 1;
}
</style>
{% endblock %} 